<template>
    <div class="navbox" :height="height" style="margin-top: -20px;">
      <div class="zhanBox" @click="changeadvanced">
          <span>{{ advanced ? "收起" : "展开" }}</span>
          <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> 
      </div>
    
      <div class="steps" v-show="advanced"></div>
      <div class="flex justifyContentSpaceBetween" v-show="advanced">
        <span class="buzhou fl"><div :class="sign.a?'yuan2 mb5':'yuan mb5'">1</div><div :class="sign.a?'ys':''">创建合同</div></span>
        <span class="buzhou fl"><div :class="sign.b?'yuan2 mb5':'yuan mb5'">2</div><div :class="sign.b?'ys':''">指标填报</div></span>
        <span class="buzhou fl"><div :class="sign.c?'yuan2 mb5':'yuan mb5'">3</div><div :class="sign.c?'ys':''">合同审核</div></span>
        <span class="buzhou fl"><div :class="sign.d?'yuan2 mb5':'yuan mb5'">4</div><div :class="sign.d?'ys':''">发起结果填报</div></span>
        <span class="buzhou fl"><div :class="sign.e?'yuan2 mb5':'yuan mb5'">5</div><div :class="sign.e?'ys':''">结果填报</div></span>
        <span class="buzhou fl"><div :class="sign.f?'yuan2 mb5':'yuan mb5'">5</div><div :class="sign.f?'ys':''">结果汇总</div></span>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    sign: {}
  },
  data() {
    return {
      advanced: false,
      height: '0',
    }
  },
  methods: {
    init() {
    },
    changeadvanced() {
      this.advanced = !this.advanced;
      if(this.advanced){
        this.height= '50'
      }
		},
  }
}
</script>
<style scoped>
.steps {
  height: 2px;
  background: #1f84ec;
  width: 100%;
  margin-top: 5px;
  margin-top: 20px;
}

.ys {
  color: #1f84ec;
}

.yuan {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #d6e8fb;
  border-radius: 50%;
  margin-top: -20px;
  margin-left: 44%;
  color: #fff;
}

.yuan2 {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #1f84ec;
  margin-top: -20px;
  margin-left: 44%;
  color: #fff;
}

.buzhou {
  width: 20%;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
}

.fl {
  float: left
}
</style>
<style>
.navbox{
  padding: 10px 0px;
  box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.zhanBox{
  width:100%;
  overflow: hidden;
}
.zhanBox span{
  float: left;
  margin-left: 15px;
}
.zhanBox i{
  float: right;
  margin-right: 15px;
}
</style>
